<html>
  <head>
    <meta charset="utf8">
    <title>element-UI 中弹框学习</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  </head>
  <body>
    <!-- 挂载点 -->
    <div id='vue-app'></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      let options = {
        template: `
          <button @click="dialogVisible = true">显示</button>
          <el-dialog
           v-model="dialogVisible" title="弹出框标题">
            弹出框显示内容区域
            <template #footer>
              <el-button @click='dialogVisible = false'>确认</el-button>
              <el-button @click='dialogVisible = false'>取消</el-button>
            </template>
          </el-dialog>

          <el-button @click='dialogTableVisible = true'>弹框显示列表数据</el-button>
          <el-dialog v-model='dialogTableVisible' title='列表数据展示'>
            <el-table :data='personInfo'>
              <el-table-column property='id' label='Code' width='100'/>  
              <el-table-column property='name' label='Name' width='100'/>  
              <el-table-column property='gender' label='Gender' width='100'/>
              <el-table-column property='phone' label='Phone' width='100'/>
            </el-table>
            <template #footer>
              <el-button @click='dialogTableVisible=false'>关闭</el-botton>
            </template>
          </el-dialog>

          <el-button @click="dialogFormVisible = true">新增</el-button>
          <el-dialog v-model='dialogFormVisible' title='新增'>
            <el-form :data='user'>
              <el-form-item label='姓名'>
                <el-input v-model='user.name'/>
              </el-form-item>
              <el-form-item label='电话'>
                <el-input v-model='user.phone'/>
              </el-form-item>
              <el-form-item label='性别'>
                <el-select v-model='user.gender' placeholder='请选择'>
                  <el-option label='男' value='male'/>
                  <el-option label='女' value='female'/>
                </el-select>
              </el-form-item>  
              <el-button type='success' @click='sumbit()'>提交</el-button>           
            </el-form> 
          </el-dialog>
          `,
        data: function() {
          return {
            dialogVisible: false,
            dialogTableVisible:false,
            dialogFormVisible:false,
            personInfo:[],
            user:{
              name: '',
              phone: '',
              gender: ''
            },
          }
        },   
        methods: {
          loadData: function(noty) {
            axios.get('/user').then((res) => {
              console.log(2)
              this.personInfo = res.data.data
              if(noty)
                alert('数据已刷新')
            })
            console.log(1)
          },
          sumbit: function(){
            let method = (location.search == '')?'post':'put' 
            axios[method]('/user', this.user).then((res)=>{
              res = res.data
              if(res.code == 0) {
                console.log(this.user)
                alert('操作成功')
                location.href = './index.vue.html'
              } else
                alert('添加失败')
            })
          }
        }, 
        // mounted被挂载后执行
        mounted: function() {
          this.loadData(false)
        }
      }
      let ppz = Vue.createApp(options)
      ppz.use(ElementPlus)
      ppz.mount('#vue-app')
    </script>
  </body>
</html>